<template>
	<u-navbar id="jp-navbar" v-if="show" placeholder height="88rpx" :bgColor="bgColor" @leftClick="leftClick"
		@rightClick="rightClick">
		<template #left>
			<slot name="left">
				<template v-if="isBack">
					<u-icon :name="leftIcon" :size="leftIconSize" bold :color="leftIconColor"></u-icon>
					<text v-if="leftText"
						:style="{color: leftIconColor,fontSize:'30rpx',marginLeft:'6rpx'}">{{ leftText }}</text>
				</template>
			</slot>
		</template>
		<template #center>
			<slot name="center">
				<jp-ellipsis-text lines="1" class="title" :style="[{width:'400rpx'}, $u.addStyle(titleStyle)]">
					{{ title }}
				</jp-ellipsis-text>
			</slot>
		</template>
		<template #right>
			<slot name="right">
				<u-icon v-if="rightIcon" :name="rightIcon" bold :size="rightIconSize"></u-icon>
				<text v-if="rightText"
					:style="{color: rightIconColor,fontSize:'30rpx',marginLeft:'6rpx'}">{{ rightText }}</text>
			</slot>
		</template>
	</u-navbar>
</template>

<script>
	export default {
		name: 'jp-navbar',
		props: {
			bgColor: {
				type: String,
				default: '#fff'
			},
			isBack: {
				type: [Boolean, String],
				default: true
			},
			leftIcon: {
				type: String,
				default: 'arrow-left'
			},
			leftText: {
				type: String,
			},
			leftIconSize: {
				type: [String, Number],
				default: "40rpx"
			},
			leftIconColor: {
				type: String,
				default: '#303133'
			},
			rightIcon: {
				type: String,
			},
			rightText: {
				type: String,
			},
			rightIconSize: {
				type: [String, Number],
				default: "40rpx"
			},
			rightIconColor: {
				type: String,
				default: '#303133'
			},
			title: {
				type: String,
				default: ''
			},
			titleStyle: {
				type: [String, Object],
			},
			controlBack: {
				type: Boolean,
				default: false,
			},
			navBottom: {
				type: Number,//jp-navBar挂载完毕会自动计算出导航栏底部的px数值
				default: 0,
			},
			show: {
				type: Boolean,
				default: true,
			}
		},
		data() {
			return {
				
			};
		},
		mounted() {
			this.$nextTick(()=>{
				this.reHeaderRect()
			})
		},
		options: {
			styleIsolation: 'shared' // 解除样式隔离(解决在子组件中使用deep修改第三方样式失效的问题)
		},
		watch: {
			title: {
				handler(newVal) {
					// #ifdef H5
						if(newVal == '') {
							newVal = document.title || ''
						}
					// #endif
					uni.setNavigationBarTitle({
						title: newVal
					})
				},
				immediate: true
			}
		},
		methods: {
			leftClick() {
				if (this.isBack) {
					if (this.controlBack) {
						this.$emit('onBackClick')
						return
					}
					uni.navigateBack({
						fail: (err) => {
							if(err && err.errMsg == 'navigateBack:fail cannot navigate back at first page.') {
								uni.showToast({
									icon: 'none',
									title: '已经在首页了'
								})
							}
						}
					})
				}
			},
			rightClick() {
				console.log('【jp-navbar】=>rightClick')
			},
			//计算"jp-navbar"的布局信息
			reHeaderRect() {
				let query = uni.createSelectorQuery().in(this);
				query.select('#jp-navbar').boundingClientRect();
				query.exec(res => {
					this.$emit("update:navBottom",res[0].bottom)
					console.warn('aaaaaaaaaaaaaa=>'+res[0].bottom)
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 500;
		color: '#303133';
	}
</style>